<template>
  <div class="box">
    <h1>组件间通信10: 插槽==> 作用域插槽</h1>

    <Child title="abcd">
     <template v-slot:bottom>
       <h4>底部内容</h4>
     </template>
     <template #top>
       <h3>顶部内容</h3>
     </template>

     <!-- <template> -->
       <!-- <div>
         默认插槽内容
       </div> -->
     <!-- </template> -->
    </Child>


    <h2>需求: 自定义TODO列表组件能实现下面需求</h2>

    <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2>
    <List :data="todos">
    <!-- 
      v-slot用来指定用于接收子组件传递过的所有数据的容器对象
      {
        row: item数据对象
        $index: 下标
      }
     -->
      <template v-slot="item">
        <span :style="{color: item.row.isComplete ? 'green' : 'black'}">{{item.row.text}}</span>
      </template>
    </List>

    <h2>效果二: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配</h2>
    <List :data="todos">
       <template v-slot="{row, $index}">
          <span :style="{color: $index%2===1 ? 'blue' : 'green'}">
            {{$index + 1}}--{{row.text}}
          </span>
        </template>
    </List>
   
  </div>
</template>

<script type="text/ecmascript-6">
  import Child from './Child.vue'
  import List from './List'
  export default {
    name: 'SlotTest',
    data () {
      return {
        msg: 'dddddd',
        todos: [
          {id: 1, text: 'AAA', isComplete: false},
          {id: 2, text: 'BBB', isComplete: true},
          {id: 3, text: 'CCC', isComplete: false},
          {id: 4, text: 'DDD', isComplete: false},
        ]
      }
    },

    components: {
      List,
      Child
    }
  }
</script>
